<template>
	<view class="">
        <!--填空题 -->
       <view v-if="parameterValue.ask.askType == 2">
       	  <form @submit="formSubmit(parameterValue.answers[0])">
       	  	<view class="input-select weui-flex transmit" :style="'bottom:'+flexBHeight+'px'"
       	  		:class="iphonex=='iphonex'?'iphonexH':''">
       	  		<view class="weui-flex__item">
       	  			<view class="placeholder">
       	  				<view class="weui-flex">
       	  					<view>
       	  						<view class="placeholder" style="width: 30rpx;">
       	  							<!-- <view class="sendAudio">
       	  						</view> -->
       	  						</view>
       	  					</view>
       	  					<view class="weui-flex__item">
       	  						<view class="placeholder">
       	  							<input name="userInput" v-model="chartText" @focus="autoFocus"
       	  								@blur="btoomBlur" :adjust-position="false" class="inputSend"></input>
       	  						</view>
       	  					</view>
       	  				</view>
       	  			</view>
       	  		</view>
       	  		<view class="weui-flex__item">
       	  			<view>
       	  				<button class="sendBtn" form-type="submit">发送</button>
       	  			</view>
       	  		</view>
       	  	</view>
       	  </form>
       </view>
		<!-- 性别 -->
		<view class="sex-selection select-box"
			v-if="parameterValue.ask.askType==3&&parameterValue.answers[0].ansName=='男' || parameterValue.answers[0].ansName=='女'">
			<view class="each-gender" @tap="chooseDatas(item)" v-for="(item,index) in parameterValue.answers"
				:key="item.ansId">
				<dev-svg-image :style="{'opacity':chooseValue.ansName==item.ansName?1:0.5}" width="160" height="160"
					mode="image" :imageUrl="item.ansName=='男'?nanImg:nvImg">
				</dev-svg-image>
				<text class="gender-writing">{{item.ansName}}</text>
			</view>
		</view>

		<!-- 时间选择 -->
		<view class="time-select select-box" v-if="parameterValue.ask.askType==5">
			<dev-picker-time height="300" :defaultTime="parameterValue.defaultValue || '1950-01-01'" v-model="timeValue">
			</dev-picker-time>
			<dev-button @tapDev="birthDateSelection(parameterValue.answers[0])" width="466" left="118" top="30"
				height="80" radius="40" bgColor="#8EEAE2">确定</dev-button>
		</view>

		<!-- 数值 尺子选择 -->
		<view class="ruler-selection select-box" v-if="parameterValue.ask.askType==1">
			<view v-for="(item,index) in valueExpression" :key="index">
				<view class="select-value">
					<text class="large-value">{{valueSelection[index]}}</text>
					<text class="company">{{parameterValue.ask.unitName}}</text>
				</view>
				<dev-ruler v-model="valueSelection[index]" :decimal="item.fixedNum" :initial-value="(parameterValue.defaultValue.split('/')[index]) || item.defaultValue"
					:maxNum="item.maxValue" :minNum="item.minValue" borderColor="#fff"></dev-ruler>
			</view>

			<dev-button @tapDev="rulerOk(0)" width="466" left="118" top="30" height="80" radius="40" bgColor="#8EEAE2">确定
			</dev-button>
           <dev-button v-if="parameterValue.ask.askRequire==1" @tapDev="rulerOk(1)" width="466" left="118" top="30" height="80" radius="40" bgColor="#8EEAE2">不知道
            </dev-button>
		</view>


		<!-- 单选 多选 -->
		<view class="choice-select select-box"
			v-if="parameterValue.ask.askType==3 && parameterValue.answers[0].ansName!=='男' && parameterValue.answers[0].ansName!=='女' || parameterValue.ask.askType==4 && parameterValue.answers[0].ansName!=='男'">
			<view class="multi-select-label" v-show="parameterValue.ask.askType==4">
				可多选
			</view>
			<view class="" style="height: 40rpx;"></view>
			<view class="scroll-selection">
				<view class="option-text" v-show="parameterValue.answers.length>7">
					上滑展示更多选项
				</view>
				<view @tap.stop="choiceQuestion(item,index)"
					:class="selectedId.search(item.ansId)== -1?'no-choose':'choose-select'"
					v-for="(item,index) in parameterValue.answers" :key="index">
					· {{item.ansName}}
					<dev-svg-image v-show="selectedId.search(item.ansId)!== -1" svgName="checkmark"></dev-svg-image>
				</view>
			</view>
			<dev-button @tapDev="optionConfirmation()" width="466" left="88" top="30" height="80" radius="40"
				bgColor="#8EEAE2">确定
			</dev-button>

		</view>

	</view>
</template>

<script>
	import devRuler from './dev-ruler.vue'
	export default {
		components: {
			devRuler
		},
		props: {
			//是否显示
			show: {
				mode: {
					type: Boolean,
					default: false
				}
			},
			// 选择类型
			mode: {
				type: String,
				default: 'sex',

			},
			//数据
			data: {
				type: Object,
				default: () => {}
			},
			//测评信息
			evaluationData: {
				type: Object,
				default: () => {}
			},
			ansIds: {
				type: [String, Number],
				default: ''
			},
			//是否上次作答的选项
			lastAnswer: {
				type: Boolean,
				default: false
			},
			answerValue: {
				type: [String, Number],
				default: ''
			},

		},
		watch: {
			data(newValue, oldValue) {
				console.log(newValue, '可以获取到值吗')
				if (newValue.ask.valueExpression) {
					this.valueExpression = JSON.parse(newValue.ask.valueExpression)
					console.log(this.valueExpression, '没值吗')
				}

				this.parameterValue = newValue;

				this.multipleChoiceData.ansName = newValue.ansName;


			},
			ansIds(newValue, oldValue) {
				this.selectedId = newValue;
				this.multipleChoiceData.ansId = newValue;
			},
			lastAnswer(newValue, oldValue) {
				this.isLastAnswer = newValue;
			}

		},
		created() {

			if (this.parameterValue.ask.valueExpression) {
				this.valueExpression = JSON.parse(this.parameterValue.ask.valueExpression)
				console.log(this.valueExpression, '没值吗')
			}
            this.iphonex = uni.getStorageSync('iphonex')
            
		},

		data() {

			return {
				nanImg: 'shoppingMall/5BE1F8402B524F98B233AD8C477DB07E.png', //图片地址
				nvImg: 'shoppingMall/CD4C077DA508480484E5D6659AE611F1.png', //图片地址
				parameterValue: this.data, //参数值

				chooseValue: '', //选择的数据
				timeValue: '', //选择的时间
                chartText: this.data.defaultValue,//
				valueExpression: [], //数字循环项
				valueSelection: [], //尺子选择的值

				multipleChoiceData: {
					ansId: this.ansIds,
					ansName: this.data.ansName
				}, //选择题的数据

				selectedId: this.ansIds, //已经选择的id 信息


				multiSelectInformation: [], //多选信息
				excludeOtherItems: false, //是否排除其他项

				isLastAnswer: this.lastAnswer, //是否为继续答题并第一次修改
                
                flexBHeight: 0,
                iphonex: '', //是否苹果x以上机型
                
			}
		},
		methods: {
           
            btoomBlur() {
            	this.flexBHeight = 0
            },
            autoFocus(e) {
            	this.flexBHeight = e.detail.height
            },
			//性别选择答案
			chooseDatas(val) {
				this.chooseValue = val;
				console.log(val, '选项id')
				console.log(this.evaluationData, '测评信息')
				console.log(this.data, '当前传递过来的值')

				this.$emit('change', {
					ansId: val.ansId,
					ansValue: val.ansName,
					askId: this.data.ask.askId,
					topicId: this.data.ask.topicId,
					userAnsId: this.evaluationData.userAnsId
				})

			},
            formSubmit(val) {
            	console.log(val,"提交填空题")
                this.$emit('change', {
                	ansId: val.ansId,
                	ansValue: this.chartText,
                	askId: this.data.ask.askId,
                	topicId: this.data.ask.topicId,
                	userAnsId: this.evaluationData.userAnsId
                })
            },
			//出生日期选择答案
			birthDateSelection(val) {
				console.log(this.timeValue, '选择的日期时间')
				this.$emit('change', {
					ansId: val.ansId,
					ansValue: this.timeValue,
					askId: this.data.ask.askId,
					topicId: this.data.ask.topicId,
					userAnsId: this.evaluationData.userAnsId
				})
			},

			//尺子确认
			rulerOk(no) {
                let ansValue = no==1?'不知道':this.valueSelection.join(this.valueSelection.length > 1 ? '/' : ',');
				console.log(this.parameterValue.answers, '选择的日期时间')
				let ansId = [];
				this.parameterValue.answers.forEach(item => {
					ansId.push(item.ansId)
				})
				console.log(this.valueSelection.length, '数据长度是多少？？？')
				this.$emit('change', {
					ansId: ansId.toString(),
					ansValue: ansValue,
					askId: this.data.ask.askId,
					topicId: this.data.ask.topicId,
					userAnsId: this.evaluationData.userAnsId
				})
			},
			//单选多选
			choiceQuestion(val, index) {
				//如果当前处于第一次修改回调的数据
				// if (this.isLastAnswer) {
				//判断之前所选择的数据是否为无以上。。。 排他类型选项。
                
				this.parameterValue.answers.forEach(item => {
					if (this.selectedId.search(item.ansId) !== -1) {
						//如果之前选择的时 无以上
						if (item.ansName.search('无以上') !== -1 || item.ansName.search('清淡') !== -1 || item.ansName.search('以上都') !== -1) {
							this.excludeOtherItems = true;
						}
					}
				})
				this.isLastAnswer = false; //计算完结果后 不再进行计算
				// }
                console.info(this.excludeOtherItems,"this.excludeOtherItems")

				//如果当前处于单选状态
				if (this.parameterValue.ask.askType == 3) {
					this.multipleChoiceData = val;
					this.selectedId = val.ansId.toString();
				}
				//如果当前处于多选状态
				if (this.parameterValue.ask.askType == 4) {
					let list;
					if (this.selectedId !== '' && this.selectedId !== null) {
						list = JSON.parse(JSON.stringify(this.selectedId.split(',')));
					} else {
						list = [];
					}
					//如果当前选择了 无以上症状 。。。选项，清楚之前所选数据
					if (val.ansName.search('无以上') !== -1 || val.ansName.search('清淡') !== -1 || val.ansName.search('以上都') !== -1) {
                        this.selectedId = val.ansId.toString();
						this.excludeOtherItems = true;
					} else {
						//如果当前已经选择无以上症状，在点击新项时需取消状态
						if (this.excludeOtherItems) {
							this.excludeOtherItems = false;
							this.selectedId = '';
							list = [];
						}
						//判断当前id是否已经选中
						if (this.selectedId.search(val.ansId) !== -1) {
							console.log('当前id已存在')
							list = list.filter(item => item != val.ansId)
							this.selectedId = list.toString();
						} else {
							list.push(val.ansId);
							this.selectedId = list.toString();
						}
					}
                    console.info(this.excludeOtherItems,"this.excludeOtherItems--2")
					this.multiSelectInformation = [];
					//循环筛选当前选项数据
					this.parameterValue.answers.forEach(item => {
						if (this.selectedId.search(item.ansId) !== -1) {
							this.multiSelectInformation.push(item)
						}
					})
					
                   //获取单独的排他逻辑
                   if(this.parameterValue.ask.ansExclude!=null && this.parameterValue.ask.ansExclude!=''  ){
                      let ansExcludeJson =  JSON.parse(this.parameterValue.ask.ansExclude);
                      console.info(ansExcludeJson,"ansExcludeJson")
                           if(!Array.isArray(ansExcludeJson)){
                               let group =  ansExcludeJson.group;
                               let ansExcludeArr = ansExcludeJson.excludeAll.split(",");
                               let removeGroupAnsId;
                               console.info(ansExcludeArr.indexOf(val.ansId+""),"ansExcludeArr")
                               if(ansExcludeArr.length>0 && ansExcludeArr.indexOf(val.ansId+"")!==-1){
                                    this.selectedId = val.ansId.toString();
                                    this.excludeOtherItems = true;
                               }
                                                       
                               //设置分组排他
                               if(this.multiSelectInformation.length>1 && Array.isArray(group)){
                                   let removeSelectInformation =  this.multiSelectInformation.filter(item=>{return item.ansId==val.ansId} );
                                   removeSelectInformation.forEach(item=>{
                                       group.forEach((groupData,index)=>{
                                            let groupKey = "group"+(index+1)
                                            //判断已经选择的集合中是否包含分组内容
                                           if(groupData[groupKey].indexOf(item.ansId)!=-1){
                                              //如果包含，则删除本次选择同分组的其它内容
                                              let groupAnsId =  groupData[groupKey].split(",");
                                              
                                             removeGroupAnsId = groupAnsId.filter(groupAnsData=>{
                                                 return groupAnsData!=val.ansId;
                                             });
                                              //判断两个选项在同一个分组
                                             if(ansExcludeJson.type=='groupSingle'){
                                                 this.removeAns(removeGroupAnsId)
                                             }
                                            
                                           }
                                       })
                                       
                                   })
                                                         
                               }
                           }
                           
                     
                   }
                   
                   let ansName = this.multiSelectInformation.map(item => {
                   	return item.ansName
                   }).toString();
                    console.info(ansName,"ansName-->");
                   this.multipleChoiceData = {
                   	ansId: this.selectedId,
                   	ansName: ansName
                   }

				}
			},
            removeAns(removeGroupAnsId){
                if(removeGroupAnsId){
                    this.multiSelectInformation.map((item,index)=>{
                       if(item.ansId==removeGroupAnsId[0]){
                           this.multiSelectInformation.splice(index,1)
                       }
                     
                    })
                    console.info(this.multiSelectInformation,"his.multiSelectInformation")
                    let ansName = this.multiSelectInformation.map(item => {
                    	return item.ansName
                    }).toString();
                    
                    this.selectedId = this.multiSelectInformation.map(item => {
                          return item.ansId
                      }).toString();
                }
            },
            
			//点击选择选项确认
			optionConfirmation() {
				//this.isLastAnswer为true 代表着用户没有修改数据，直接又点击了确认
				if (this.isLastAnswer) {
					this.$emit('noChange')
				} else {
					console.log(this.multipleChoiceData, 'this。multipleChoiceData 没有值mA???')
					let val = this.multipleChoiceData;
					if (val.ansId) {
						this.$emit('change', {
							ansId: val.ansId,
							ansValue: val.ansName,
							askId: this.data.ask.askId,
							topicId: this.data.ask.topicId,
							userAnsId: this.evaluationData.userAnsId
						})
					}

				}

			}





		}
	}
</script>

<style lang="scss" scoped>
	.select-box {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 50rpx;
		overflow: hidden;

	}
    .iphonexH {
    	height: 140upx !important;
    }
    //填空题
    .input-select{
        .inputSend {
        	width: 565rpx;
        	height: 70rpx;
        	background: #F5F5F5;
        	border-radius: 12upx;
        	border: 1upx solid #E2E1E2;
        	margin-top: 17upx;
        	padding: 0 20upx;
        	box-sizing: border-box;
        }
        .sendBtn {
			width: 120upx;
            height: 70rpx;
			font-size: 27upx;
			float: right;
			margin: 20rpx 30rpx 0 0;
            background-color: #8EEAE2 ;
			padding: 0;
		}
    }
	// 性别选择
	.sex-selection {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 30rpx 0;

		.each-gender {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.gender-writing {
				margin-top: 16rpx;
			}
		}
	}

	//时间选择
	.time-select {
		padding: 30rpx 0;
	}

	//尺子选择
	.ruler-selection {
		padding: 30rpx 0;

		.select-value {
			width: 100%;
			text-align: center;

			.large-value {
				font-size: 68rpx;
				font-weight: 500;
				color: #000000;
			}

			.company {
				margin-left: 10rpx;
				font-size: 30rpx;
				color: #000000;
			}
		}
	}

	//单选 多选
	.choice-select {
		padding: 50rpx 30rpx;
		position: relative;

		.scroll-selection {
			max-height: 700rpx;
			overflow-y: auto;

			.option-text {
				text-align: center;
				font-size: 24rpx;
				color: #4A4A4A;
				margin-bottom: 10rpx;
			}
		}

		.multi-select-label {
			position: absolute;
			top: 0;
			left: 0;
			width: 177rpx;
			height: 50rpx;
			background: #F5A623;
			border-radius: 9rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.no-choose {
			width: 644rpx;
			padding: 16rpx 32rpx;
			background: #F5F5F5;
			border-radius: 24rpx;
			font-size: 38rpx;
			font-weight: 400;
			color: #4A4A4A;
			line-height: 44rpx;
			margin-bottom: 30rpx;
		}

		.choose-select {
			display: flex;
			justify-content: space-between;
			width: 644rpx;
			padding: 16rpx 32rpx;
			background: #EFFCFC;
			border-radius: 24rpx;
			font-size: 38rpx;
			font-weight: 400;
			color: #0EC0B1;
			line-height: 44rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
